<template>

    <div id="organization-chart" class="w-h-100 pos-r flex-1 apply-container page-public-s" style="box-sizing: border-box;overflow:hidden;">
        <div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box; padding: 6px;">
            <div class="search-s" style="box-sizing: border-box;">
                <el-card shadow="never" :body-style="{ paddingBottom: '0' }">
                    <el-form class="box-f" ref="queryForm" :inline="true">
                        <el-form-item label="组织管理：">
                            <el-select 
                                v-model="searchVal" 
                                filterable 
                                class="m-2" 
                                placeholder="请选择搜索方式" 
                                @change="searchChange"
                                popper-class="set-select"
                                :popper-append-to-body="false"
                            >
                                <el-option
                                    v-for="item in searchOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <!-- 集团组织 -->
                            <template v-if="searchVal === '1'">
                                <el-select 
                                    v-model="transferVal" 
                                    filterable 
                                    class="m-2" 
                                    placeholder="集团组织" 
                                    @change="acquireChange"
                                    value-key="id"
                                    popper-class="set-select"
                                    :popper-append-to-body="false"
                                >
                                    <el-option
                                        v-for="item in groupOption"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id"
                                    />
                                </el-select>
                            </template>
                            <!-- 友商组织 -->
                            <template v-else>
                                <el-select 
                                    v-model="transferVal" 
                                    filterable 
                                    class="m-2" 
                                    placeholder="友商组织" 
                                    @change="acquireChange"
                                    value-key="id"
                                    popper-class="set-select"
                                    :popper-append-to-body="false"
                                >
                                    <el-option
                                        v-for="item in responsiblePle"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id"
                                    />
                                </el-select>
                            </template>
                        </el-form-item>
                        <el-form-item >
                            <el-button @click="resetClick" icon="ele-Refresh" type="primary"> 重置 </el-button>
                            <!-- <el-button icon="ele-Search"> 查询 </el-button> -->
                            <el-button @click="nodeClick('')" icon="ele-Plus" type="primary"> 新增 </el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>

            <div style="box-sizing: border-box;" class="flex-1 pos-r">
                <div class="pos-a w-h-100" style="box-sizing: border-box;">
                    <el-card class="box-card w-h-100" shadow="never" style="margin-top: 16px;">
                        <div style="" class="w-h-100 ver-flex">
                            <div class="flex-1 pos-r">
                                <div class="pos-a w-h-100">
                                    
                                    <div class="w-h-100" style="width: 100%">
                                        <div class="radio-s">
                                            <span>展示方式：</span>
                                            <el-radio-group v-model="radioVal" @change="radioChange">
                                                <el-radio label="1">横向展示</el-radio>
                                                <el-radio label="2">竖向展示</el-radio>
                                            </el-radio-group>
                                        </div>
                                        <vue3-tree-org
                                            :data="dataTree"
                                            :horizontal="isHorizontal"
                                            :collapsable="collapsable"
                                            :label-style="style"
                                            :node-draggable="false"
                                            :default-expand-level="expandLevel"
                                            :define-menus="defineMenus"
                                            :node-add="nodeAdd"
                                            :node-edit="nodeEdit"
                                            :node-delete="nodeDelete"
                                            @on-node-click="onNodeClick"
                                        >
                                            <!-- 自定义节点内容 -->
                                            <template v-slot="{node}">
                                                <div class="tree-org-node__text node-label">
                                                    <template v-if="node.$$data">
                                                        <div class="custom-content">
                                                            <img v-if="node.$$data.imagePath" :src="pathData + '/' + node.$$data.imagePath" />
                                                            
                                                            <img v-else :src="imagePath" />
                                                        </div>
                                                        <span>{{node.$$data.title}}</span>
                                                    </template>
                                                </div>
                                            </template>
                                            <!-- 自定义展开按钮 -->
                                            <!-- <template v-slot:expand="{node}">
                                                <div>1</div>
                                            </template> -->
                                        </vue3-tree-org>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                    </el-card>
                </div>
            </div>
        </div>
        <add-organization
            :repairInfo="repairInfo"
            :isUseDialog="isUseDialog"
            @updateData="getDataFun"
            @cancelUseClick="cancelUseClick"
            @controlUseClick="controlUseClick"
        />
        <add-edit-node
            :repairInfo="repairNodeInfo"
            :isUseDialog="isNodeDialog"
            :presentState="presentState"
            :searchVal="searchVal"
            @updateData="getNodeFun"
            @cancelUseClick="cancelNodeClick"
            @controlUseClick="controlNodeClick"
        />
    </div>
</template>
<script lang="ts">
import { defineComponent, ref , onMounted , toRaw } from 'vue';
import { sysOrgList , sysOrgTree , sysOrgDelete } from '/@/api/centerControl/oms';
import AddOrganization from './component/oms/add-organization.vue';
import AddEditNode from './component/oms/add-edit-node.vue';
import { ElMessage , ElMessageBox } from 'element-plus';
import img1 from './images/img1.png';

import { Vue3TreeOrg } from 'vue3-tree-org';
import './style/vue3-tree-org.css';

// import useCurrentInstance from '/@/utils/hook/useCurrentInstance';

export default defineComponent( {
    name: 'organization-chart',
    components: {
        AddOrganization,
        AddEditNode,
        Vue3TreeOrg,
    },
    setup(props){
        // const { proxy } = useCurrentInstance();
        // const $t = proxy.$t;
        
        // 基础类
        const isUseDialog = ref(false) // 新增/编辑弹出框隐藏/显示
        const isNodeDialog = ref(false)
        const repairInfo = ref() // 传递子组件数据
        const repairNodeInfo = ref()
        const presentState = ref() // 当前状态
        let recordId: any = ''
        const pathData = ref(import.meta.env.VITE_API_URL) // 获取地址
        // 基础类

        // 树形结果数据类
        let treeInfo = {}
        let groupOne = '' // 集团组织第一条数据
        let groupOneId = '' // 集团组织第一条数据id
        let responsibleOne = '' // 友商组织第一条数据
        let responsibleOneId = '' // 友商组织第一条数据id
        const dataTree = ref()
        const groupOption = ref() // 集团数据
        const responsiblePle = ref() // 友商数据
        // 树形结果数据类

        // 组织结构相关设置
        const expandLevel = ref(1000000)
        const isHorizontal = ref(false) // 是否横向显示
        const radioVal = ref('1')
        // 组织结构相关设置

        // 搜索类
        const searchVal = ref('1') // 默认值
        const transferVal = ref() // 需要查询的值
        /*** resetClick 重置按钮 */
        const resetClick = () => { 
            searchVal.value = '1'
            transferVal.value = groupOne
            recordId = groupOneId
            getTree(groupOneId)
        }
        /*** 搜索类型选择事件 searchChange */
        const searchChange = (val:any) => {
            if(val === '1'){
                recordId = groupOneId
                transferVal.value = groupOne
                getTree(groupOneId)
            }else{
                recordId = responsibleOneId
                transferVal.value = responsibleOne
                getTree(responsibleOneId)
            }
        }
        /*** acquireChange 搜索下拉框选择的数据 ---- 传给接口数据 */
        const acquireChange = (val:any) => {
            recordId = val
            getTree(val)
        }
        // 搜索类

        /*** getInfo 获取集团/友商数据 */
        const getInfo = async (n?:Number) => {
            let param:any = {}
            param.IsParentTree = true
            if(!n){
                for(let i = 1 ; i < 3 ; i++){
                    param.type = i
                    let res:any = await sysOrgList()
                    if(res.success){
                        if(i === 1){
                            if(res.data.length !== 0){
                                groupOption.value = res.data
                                transferVal.value = res.data[0].name
                                groupOne = res.data[0].name
                                groupOneId = res.data[0].id
                                recordId = res.data[0].id
                                getTree(res.data[0].id)
                            }
                        }else{
                            if(res.data.length !== 0){
                                responsiblePle.value = res.data
                                responsibleOne = res.data[0].name
                                responsibleOneId = res.data[0].id
                            }
                        }
                    }
                }
            }else{
                param.type = n
                let res:any = await sysOrgList(param)
                if(res.success){
                    if(n === 1) {
                        if(res.data.length !== 0){ groupOption.value = res.data }
                    }else {
                        if(res.data.length !== 0){ responsiblePle.value = res.data }
                    }
                }
            }
        }

        /*** getTree 获取组织架构树 */
        const getTree = async (id?:any) => {
            if(id){
                let res:any = await sysOrgTree({ Pids: id })
                if(res.success && res.data.length !== 0){
                    treeInfo = res.data[0]
                    dataTree.value = res.data[0]
                }else{
                    dataTree.value = {}
                }
            }
        }
        dataTree.value = treeInfo

        /*** nodeClick 新增/编辑点击事件 */
        const nodeClick = (val:string | object) => {
            console.log('新增/编辑')
            val !== '' ? (repairInfo.value = JSON.stringify(toRaw(val))) : (repairInfo.value = '')
            isUseDialog.value = true
        }

        /*** cancelNodeClick 新增/编辑取消事件 */
        const cancelNodeClick = () => {
            isNodeDialog.value = false
        }

        /*** controlNodeClick 新增/编辑取消事件 */
        const controlNodeClick = () => {
            isNodeDialog.value = false
        }

		/*** cancelUseClick 取消事件 */
		const cancelUseClick = () => {
			isUseDialog.value = false;
		};

		/*** controlUseClick 提交事件 */
		const controlUseClick = () => {
			isUseDialog.value = false;
		};

        /*** getDataFun 数据刷新 */
        const getDataFun = () => {
            getInfo(2)
        }

        /*** getNodeFun 新增/编辑节点数据刷新 */
        const getNodeFun = () => {
            getTree(recordId)
        }

        // 组织结构相关配置
        /*** radioChange 是否横向展示 */
        const radioChange = (val:any) => {
            if(val === '1'){
                isHorizontal.value = false
            }else{
                isHorizontal.value = true
            }
        }
        /*** defineMenus 自定义右键菜单 */
        const defineMenus = () => {
            return [
                { name:'新建节点', command: 'add' },
                { name:'编辑节点', command: 'edit' },
                { name:'删除节点', command: 'delete' },
            ]
        }
        /*** 节点点击事件 */
        const onNodeClick = (e:any, data:any) => {
            console.log(toRaw(data),'data')
        }
        /*** 默认展开所有的节点 toggleExpand */
        const getMaxweight = (val:any) => {
            let weight = 0
            let max = 0
            let each = (data:any, weight:any) => {
                data.forEach((e:any) => {
                    e.weight = weight
                    if (weight > max) {
                        max = weight
                    }
                    if(e.children){
                        if (e.children.length > 0) {
                            each(e.children, weight + 1)
                        }
                    }
                })
            }
            each(val,1)
        }
        /*** nodeAdd 新增节点行为设置 */
        const nodeAdd = (e:any) => {
            isNodeDialog.value = true
            presentState.value = 'add'
            repairNodeInfo.value = JSON.stringify(toRaw(e))
        }
        /*** nodeEdit 编辑节点行为设置 */
        const nodeEdit = (e:any) => {
            isNodeDialog.value = true
            presentState.value = 'edit'
            repairNodeInfo.value = JSON.stringify(toRaw(e))
        }
        /*** nodeDelete 删除节点行为设置 */
        const nodeDelete = (e:any) => {
            ElMessageBox.alert('请确定是否删除此节点','提示',{
                confirmButtonText: '确定',
            })
            .then(async () => {
                let res:any = await sysOrgDelete({id: toRaw(e).id})
                if(res.success){
                    if(toRaw(e).parentId === 0){
                        if(searchVal.value === '1'){
                            getInfo(1)
                            transferVal.value = groupOne
                            getTree(groupOneId)
                        }else{
                            getInfo(2)
                            transferVal.value = responsibleOne
                            getTree(responsibleOneId)
                        }
                    }else{
                        getTree(recordId)
                    }
                }else{
                    ElMessage({
                        type: 'info',
                        message: res.message,
                    }) 
                }
            })
        }

        // 组织结构相关配置

        /*** onMounted 页面加载时显示 */
        onMounted(() => {
            getInfo()
            let arr = []
            arr.push(treeInfo)
            getMaxweight(arr)
        })

        return {
            isUseDialog,
            isNodeDialog,
            repairInfo,
            repairNodeInfo,
            cancelUseClick,
            controlUseClick,
            cancelNodeClick,
            controlNodeClick,
            getDataFun,
            defineMenus,
            collapsable: true,
            expandAll: true,
            dataTree,
            style: { background: "rgba(255,255,255,0)", color: "#5e6d82", },
            expandLevel,
            onNodeClick,
            nodeAdd,
            nodeEdit,
            nodeDelete,
            isHorizontal,
            radioChange,
            radioVal,

            groupOption, // 集团组织数据
            responsiblePle, // 友商组织数据
            searchOptions: [{
                value: '1',
                label: '集团组织'
            }, {
                value: '2',
                label: '友商组织'
            }], // 搜索方式
            searchChange,
            searchVal,
            resetClick,
            acquireChange,
            transferVal,
            nodeClick,
            getNodeFun,
            presentState,
            pathData,
            imagePath: img1,
        }
    },
} )
</script>
<style lang="scss"> @import './style/public.scss'; </style>
<style scoped lang="scss">
    :deep(.icon-fullscreen:before){
        content: "\e603" !important;
    }
    :deep(.el-radio){
        margin-right: 18px!important;
    }
    :deep(.zm-tree-org){
        background: rgba($color: (#FFFFFF), $alpha: 0)!important;
    }
    :deep(.tree-org-node__inner){
        box-shadow: none!important;
        border: 1px solid rgb(13,144,159)!important;
        span{
            color: rgb(13,144,159)!important;
            margin-top: 10px;
            display: block;
            font-size: 14px;
        }
    }
    :deep(.tree-org-node:after){
        border-left: 1px solid rgb(13,144,159)!important;
    }
    :deep(.tree-org-node:not(:first-child):before){
        border-top: 1px solid rgb(13,144,159)!important;
    }
    :deep(.tree-org-node:not(:last-child):after){
        border-top: 1px solid rgb(13,144,159)!important;
    }
    :deep(.tree-org>.tree-org-node:after){
        border-left: 0!important;
    }
    :deep(.tree-org-node__children:before){
        border-left: 1px solid rgb(13,144,159)!important;
    }
    :deep(.tree-org-node__expand){
        background-color: rgb(13,144,159)!important;
        border: 1px solid rgb(13,144,159)!important;
    }
    :deep(.horizontal){
        .tree-org-node:not(:first-child):before{
            border-left: 1px solid rgb(13,144,159)!important;
        }
        .tree-org-node:not(:first-child):before{
            border-left: 1px solid rgb(13,144,159)!important;
        }
        .tree-org-node:not(:first-child):before{
            border-top: 0!important;
        }
        .tree-org-node:not(:only-child):after{
            border-top: 1px solid rgb(13,144,159)!important;
        }
        .tree-org-node:not(:last-child):after{
            border-left: 1px solid rgb(13,144,159)!important;
        }
        .tree-org-node:after{
            border-left: 0!important;
        }
        .tree-org-node__children:before{
            border-top: 1px solid rgb(13,144,159)!important;
        }
    }
    #organization-chart {
        .box-f{
            :deep(.el-form-item__label){
                padding: 0;
            }
        }
        :deep(.el-card__body) {
            height: 100%;
        }
        :deep(.el-card){
            border: none !important;
        }
        ul {

            list-style: none;

            li {
                cursor: pointer;

                &:hover {
                    color: red;
                }
            }
        }
        .icon-e{
            :deep(.el-icon){
                margin-right: 0px!important;
            }
        }
        .radio-s{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
        }
        .custom-content{
            width: 40px;
            height: 40px;
            border-radius: 4px;
            margin: auto;
            overflow: hidden;
            img{
                display: block;
                width: 100%;
                height: 100%;
            }
        }
    }
</style>